<template>
    <div class="footer-item">
        <div class="content" @click="ejectDetail">
            <img class="revolve" :src="playlists[playSongIndex].al.picUrl"/>
            <div class="text">
                <span class="song-name">{{ playlists[playSongIndex].name }}</span>
                <span class="singer-name">横划切换上下首哦~</span>
            </div>
        </div>
        <div class="icons">
            <svg class="icon play" aria-hidden="true">
                <use :xlink:href="isPlaying ? '#icon-a-dianjizantingbiankuang' : '#icon-play'" @click="playMusic"></use>
            </svg>
            <SvgIcon class="icon" iconName="liebiao" />
        </div>
    </div>
    <audio ref="audio" :src="`https://music.163.com/song/media/outer/url?id=${playlists[playSongIndex].id}.mp3`"></audio>
    <van-popup
      v-model:show="isEjected"
      position="right"
      :style="{ width: '100%', height: '100%' }"
    >
    <MusicDetail :musicList="playlists[playSongIndex]" :playSong="playMusic" :isPlaying="isPlaying" />
    </van-popup>
</template>
<script>
import MusicDetail from './MusicDetail.vue'
import { mapMutations, mapState } from 'vuex'
export default {
  components: {
    MusicDetail
  },
  computed: {
    ...mapState(['playlists', 'isPlaying', 'playSongIndex', 'isEjected'])
  },
  methods: {
    ...mapMutations(['setPlaylists', 'setEjectedState']),
    // 播放音乐
    playMusic: function playMusic () {
      if (this.$refs.audio.paused) {
        this.$refs.audio.play()
        // console.log(this.isPlaying)
        this.setPlaylists(true)
        // console.log(this.isPlaying)
        return false
      }
      this.$refs.audio.pause()
      this.setPlaylists(false)
    },
    ejectDetail: function setEjected () {
      this.setEjectedState(true)
    }
  },
  watch: {
    playSongIndex: function () {
      this.$refs.audio.autoplay = true
      this.setPlaylists(true)
    },
    // 第一首歌监听不到，需要监听列表变化
    playlists: function () {
      this.$refs.audio.autoplay = true
      this.setPlaylists(true)
    }
  }
}

</script>

<style lang="scss" scoped>
.footer-item {
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 1.4rem;
    padding: .3rem;
    background-color: pink;
    border-top: 1px solid #ccc;
    .content {
        display: flex;
        // transition: transform 20s linear;
        // .revolve {
        //     transform: rotate(360deg);
        // }
    }
    img {
        width: .8rem;
        height: .8rem;
        border-radius: .6rem;
    }
    .text {
        display: flex;
        flex-direction: column;
        padding-left: .2rem;
        .song-name {
            font-size: .36rem;
        }
        .singer-name {
            color: #a6a5a9;
        }
    }
    .icons {
        display: flex;
        justify-content: center;
        align-items: center;
        :deep(.icon) {
            width: .5rem;
            height: .5rem;
        }
        .play {
            margin-right: .3rem;
        }
    }
}
</style>
